import {
  Button,
  Image,
  Input,
  Progress,
  Toast,
  Dialog,
  Field,
  Badge,
  Form,
  Uploader,
  Navbar,
} from "@taroify/core";
import { View, Button as Button1, ScrollView } from "@tarojs/components";
import FuzhuangIcon from "@/assets/images/shenqing.png";
import GuanyuIcon from "@/assets/images/guanyu.png";
import KefuIcon from "@/assets/images/kefu.png";
import WentiIcon from "@/assets/images/wenti.png";
import ShezhiIcon from "@/assets/images/shezhi.png";
import MaIcon from "@/assets/images/ma.png";
import { useEffect, useRef, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "@/store";
import { requestPOST } from "@/request";
import Taro, { useDidShow } from "@tarojs/taro";
import { setShopOwerInfo, updateMerchantInfo } from "@/store/reducers/userInfo";
import { Arrow, Edit, FriendsOutlined } from "@taroify/icons";

import P1Png from "@/assets/images/p1.png";
import P2Png from "@/assets/images/p2.png";
import P3Png from "@/assets/images/p3.png";
import P4Png from "@/assets/images/p4.png";
import P5Png from "@/assets/images/p5.png";

import C1Png from "@/assets/images/c1.png";
import C2Png from "@/assets/images/c2.png";
import C3Png from "@/assets/images/c3.png";
import C4Png from "@/assets/images/c4.png";
import LogoPng from "@/assets/images/logo.png";

const totalValues = [
  { value: 0, label: "黑铁" },
  { value: 5000, label: "黄铜" },
  { value: 10000, label: "白银" },
  { value: 20000, label: "黄金" },
  { value: 50000, label: "钻石" },
  { value: 100000, label: "王者" },
];

export default function Profile() {
  const dispatch = useDispatch();

  const accountType = useSelector(
    (state: RootState) => state.userInfo.accountType
  );
  const merchantType = useSelector(
    (state: RootState) => state.userInfo.merchantType
  );
  const offlineStores = useSelector(
    (state: RootState) => state.userInfo.offlineStores
  );
  const merchantInfo = useSelector(
    (state: RootState) => state.userInfo.merchantInfo
  );
  const shopOwnerInfo = useSelector(
    (state: RootState) => state.userInfo.shopOwnerInfo
  );
  const transactionTotal = useSelector(
    (state: RootState) => state.userInfo.merchantInfo.transactionTotal
  );
  const userInfo = useSelector((state: RootState) => state.userInfo);

  const [qrCode, setQrCode] = useState("");
  const [qrCode1, setQrCode1] = useState("");
  const baseUrl = process.env.TARO_APP_API;
  const [edit, setEdit] = useState(false);
  const [merchantShopOwnerIdCard, setMerchantShopOwnerIdCard] = useState(
    shopOwnerInfo.merchantShopOwnerIdCard
  );
  const [merchantShopOwnerName, setMerchantShopOwnerName] = useState(
    shopOwnerInfo.merchantShopOwnerName
  );
  const [blankInfo, setBlankInfo] = useState({
    merchantBankAccount: "",
    merchantBankCardNumber: "",
    merchantBankName: "",
  });
  const [info, setInfo] = useState<any>({
    merchantName: "",
    merchantImages: "",
    merchantUserName: "",
    merchantPhone: "",
    merchantAddress: "",
    merchantLogo: "",
  });

  const [model, setModel] = useState(false);
  const [model1, setModel1] = useState(false);
  const [model3, setModel3] = useState(false);
  const [progress, setProgress] = useState(0);
  const [model2, setModel2] = useState(false);
  const formRef = useRef<any>(null);

  const cancelUpdate = () => {
    setModel2(false);
    formRef.current?.reset();
    setInfo({
      merchantName: merchantInfo.merchantName,
      merchantImages: merchantInfo.merchantImages,
      merchantsBusinessHours:merchantInfo.merchantsBusinessHours,
      ...offlineStores,
    });
  };

  const commitUpdate = () => {
    Taro.showLoading({ title: "修改中..." });
    requestPOST("merchants/updateMerchantInfo", {
      merchantName: info.merchantName,
      merchantImages: info.merchantImages,
      merchantsBusinessHours: info.merchantsBusinessHours,
      isStores: info.merchantUserName ? 1 : 0,
      offlineStores: {
        merchantUserName: info.merchantUserName,
        merchantPhone: info.merchantPhone,
        merchantAddress: info.merchantAddress,
        merchantLogo: info.merchantLogo,
      },
    }).then(() => {
      setModel2(false);
      Taro.hideLoading();
      Toast.open({ type: "success", message: "修改成功" });
      dispatch(updateMerchantInfo({ ...info }));
    });
  };

  const onUpload = (key, limit = 0, type = "img") => {
    if (type === "img") {
      Taro.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
      }).then(({ tempFiles, tempFilePaths }) => {
        // const size = tempFiles[0].size;
        // if (size > 500 * 1024) {
        //   return Toast.open({ type: "fail", message: "大小超过500kb无法上传" });
        // }
        Taro.showLoading({
          title: "上传中...",
        });

        Taro.uploadFile({
          url: process.env.TARO_APP_API + "/other/uploadImage",
          filePath: tempFilePaths[0],
          name: "file",
          success(res) {
            const { fileName } = JSON.parse(res.data);
            setInfo({
              ...info,
              [key]: limit
                ? `${info[key] ? info[key] + "," : ""}${fileName}`
                : fileName,
            });
            Taro.hideLoading();
          },
          fail() {
            Toast.open({ type: "fail", message: "upload error" });
          },
        });
      });
    }
  };

  const priviewImage = (sources, current, type = "image") => {
    sources =
      sources &&
      sources
        .split(",")
        .map((item) => ({ url: process.env.TARO_APP_API + item, type }));
    Taro.previewMedia({
      sources: sources || [],
      current: current,
    });
  };

  const getProgrsss = () => {
    let value = 0;
    totalValues.forEach((item, index) => {
      if (transactionTotal >= item.value && index != 0) {
        value += 20;
      }
    });
    setProgress(value);
  };

  const handleInfo = () => {
    if (edit) {
      requestPOST("merchants/updateShopOwnerInfo", {
        merchantShopOwnerIdCard: merchantShopOwnerIdCard,
        merchantShopOwnerName: merchantShopOwnerName,
      }).then(() => {
        dispatch(
          setShopOwerInfo({
            ...shopOwnerInfo,
            merchantShopOwnerIdCard: merchantShopOwnerIdCard,
            merchantShopOwnerName: merchantShopOwnerName,
          })
        );
        Toast.open({ type: "success", message: "保存成功" });
      });
    }
    setEdit(!edit);
  };

  const uploadIdCardImage = () => {
    Taro.chooseImage({
      count: 1,
      sizeType: ["original", "compressed"],
      sourceType: ["album", "camera"],
    }).then(({ tempFiles, tempFilePaths }) => {
      // const size = tempFiles[0].size;
      // if (size > 500 * 1024) {
      //   return Toast.open({ type: "fail", message: "大小超过500kb无法上传" });
      // }
      Taro.showLoading({
        title: "上传中...",
      });
      Taro.uploadFile({
        url: process.env.TARO_APP_API + "/other/uploadImage",
        filePath: tempFilePaths[0],
        name: "file",
        success(res) {
          const { fileName } = JSON.parse(res.data);
          requestPOST("merchants/updateShopOwnerInfo", {
            merchantShopOwnerIdCard: merchantShopOwnerIdCard,
            merchantShopOwnerName: merchantShopOwnerName,
            merchantShopOwnerIdCardImage: fileName,
          }).then(() => {
            dispatch(
              setShopOwerInfo({
                ...shopOwnerInfo,
                merchantShopOwnerIdCardImage: fileName,
              })
            );
            Toast.open({ type: "success", message: "上传成功" });
          });
          Taro.hideLoading();
        },
        fail() {
          Toast.open({ type: "fail", message: "upload error" });
        },
      });
    });
  };

  const previewIdCardImage = () => {
    Taro.previewImage({
      urls: [baseUrl + shopOwnerInfo.merchantShopOwnerIdCardImage],
    });
  };

  const getBlankInfo = () => {
    requestPOST("merchants/lookBankInfo").then((res: any) => {
      setBlankInfo({ ...res });
    });
  };

  const closeBlankInfo = () => {
    setModel(false);
    getBlankInfo();
  };

  const submitBlankInfo = () => {
    requestPOST("merchants/updateBankInfo", { ...blankInfo }).then(() => {
      Toast.open({ type: "success", message: "保存成功" });
      setModel(false);
    });
  };

  const getMyCode = () => {
    // 绑定商家
    requestPOST("merchants/getMyCode", {
      page: "pages/login/index",
      scene: `userId=${
        merchantType == 1 ? userInfo.userId : merchantInfo.bindMerchantId
      }`,
      envVersion: "release",
    }).then((res: any) => {
      setQrCode(res);
    });

    // 绑定员工
    requestPOST("merchants/getMyCode", {
      page: "pages/login/index",
      scene: `userId1=${userInfo.userId}`,
      envVersion: "release",
    }).then((res: any) => {
      setQrCode1(res);
    });
  };

  const [info11, setInfo11] = useState<any>({
    afterSaleTotal: "",
    evaluationTotal: "",
    noPayTotal: "",
    noShipmentTotal: "",
    noReceivedTotal: "",
  });
  const getUserOrderList = () => {
    requestPOST("customerOrder/getUserOrderList").then((res: any) => {
      const {
        afterSaleTotal,
        evaluationTotal,
        noPayTotal,
        noShipmentTotal,
        noReceivedTotal,
      } = res;
      setInfo11({
        afterSaleTotal: afterSaleTotal || "",
        evaluationTotal: evaluationTotal || "",
        noPayTotal: noPayTotal || "",
        noShipmentTotal: noShipmentTotal || "",
        noReceivedTotal: noReceivedTotal || "",
      });
    });
  };

  const [info12, setInfo12] = useState<any>({
    salesService: "",
    commonProblem: "",
  });
  const [open1, setOpen1] = useState(false);
  const [open2, setOpen2] = useState(false);

  const getAfterSalesAndProblem = () => {
    requestPOST("other/getAfterSalesAndProblem").then((res: any) => {
      setInfo12({ ...res });
    });
  };

  useEffect(() => {
    if (accountType === 1) {
      if (merchantType === 1) {
        getBlankInfo();
      }
      getProgrsss();
      getMyCode();
      setInfo({
        merchantName: merchantInfo.merchantName,
        merchantImages: merchantInfo.merchantImages,
        merchantsBusinessHours: merchantInfo.merchantsBusinessHours,
        ...offlineStores,
      });
      getAfterSalesAndProblem();
    }
  }, []);

  useDidShow(() => {
    getUserOrderList();
  });
  return (
    <View className="taroContainer">
      <Navbar
        fixed
        nativeSafeTop
        safeArea="top"
        className="navBar"
        style={{ background: "#e3f3fe" }}
        placeholder={true}
      >
        <Navbar.Title style={{ maxWidth: "100%" }}>
          <View
            style={{
              display: "flex",
              alignItems: "center",
              width: "100vw",
              justifyContent: "center",
              position: "relative",
              fontSize: "28rpx",
              fontWeight: "normal",
            }}
          >
            <View style={{ position: "absolute", left: 20 }}>
              {merchantInfo.merchantName}
            </View>
            <View>{accountType == 1 ? "店铺" : "我的"}</View>
          </View>
        </Navbar.Title>
      </Navbar>
      {accountType === 1 ? (
        <View>
          <View
            style={{
              display: "flex",
              alignItems: "center",
              gap: "20rpx",
              padding: "40rpx",
              background: "#fff",
            }}
          >
            <View style={{ flex: "0 0 70rpx" }}>
              <Image
                src={
                  offlineStores.merchantLogo
                    ? baseUrl + offlineStores.merchantLogo
                    : baseUrl + merchantInfo.merchantImages?.split(",")[0]
                }
                width={70}
                height={70}
                style={{ borderRadius: "50%" }}
              />
            </View>
            <View>
              <View
                style={{
                  fontWeight: "bold",
                  fontSize: "33rpx",
                  color: " #222222",
                }}
              >
                {merchantInfo.merchantName}
              </View>
              {/* <View
            style={{ fontSize: "19rpx", color: "#666666", marginTop: "15rpx" }}
          >
            WXldnansfi-6135
          </View> */}
            </View>
            {merchantType == 1 && (
              <View style={{ marginLeft: "auto" }}>
                <Edit onClick={() => setModel2(true)} />
              </View>
            )}
          </View>

          <View
            style={{
              padding: "24rpx",
            }}
          >
            <View
              style={{
                fontWeight: "bold",
                fontSize: "33rpx",
                color: "#333333",
                marginTop: "11rpx",
              }}
            >
              店铺等级
            </View>

            <View
              style={{
                height: "145rpx",
                background: "#a5d7fb",
                boxShadow: "0rpx 1rpx 9rpx 0rpx rgba(59,59,59,0.19)",
                borderRadius: "14rpx",
                marginTop: "17rpx",
                padding: "24rpx",
                position: "relative",
              }}
            >
              <View
                style={{
                  position: "absolute",
                  top: "40%",
                  transform: "translateY(-50%)",
                  left: "24rpx",
                  right: "24rpx",
                }}
              >
                <Progress
                  percent={progress}
                  label={false}
                  className="custom-color1"
                />
              </View>

              <View
                style={{
                  fontSize: "20rpx",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "space-between",
                  position: "absolute",
                  top: "40%",
                  transform: "translateY(-50%)",
                  left: "24rpx",
                  right: "24rpx",
                }}
              >
                {totalValues.map((item) => (
                  <View style={{ position: "relative" }}>
                    <View
                      style={{
                        padding: "6rpx 13rpx",
                        background:
                          transactionTotal >= item.value
                            ? "linear-gradient(#85c8fa, #56adf8, #296095)"
                            : "#fff",
                        borderRadius: "20rpx",
                        color: transactionTotal >= item.value ? "#fff" : "#000",
                      }}
                    >
                      {item.value}
                    </View>
                    <View
                      style={{
                        position: "absolute",
                        whiteSpace: "nowrap",
                        fontSize: "22rpx",
                        color: "#023552",
                        left: "0",
                        right: "0",
                        textAlign: "center",
                      }}
                    >
                      {item.label}
                    </View>
                  </View>
                ))}
              </View>
            </View>

            {/* <View
              style={{
                background: "#fff",
                boxShadow: "0rpx 1rpx 9rpx 0rpx rgba(59,59,59,0.19)",
                borderRadius: "14rpx",
                marginTop: "35rpx",
              }}
            >
              <View
                style={{
                  fontWeight: "bold",
                  fontSize: "29rpx",
                  color: "#333333",
                  padding: "24rpx",
                  borderBottom: "2rpx solid #DDDDDD",
                }}
              >
                我的订单
              </View>
              <View
                style={{
                  display: "flex",
                  fontSize: "22rpx",
                  color: "#333333",
                  padding: "47rpx",
                  justifyContent: "space-between",
                  textAlign: "center",
                }}
              >
                <View
                  onClick={() =>
                    Taro.navigateTo({ url: "/packages/myOrder/index?value=0" })
                  }
                  style={{
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "center",
                    alignItems: "center",
                  }}
                >
                  <Badge
                    content={info11.noPayTotal}
                    style={{ background: "#F90000" }}
                  >
                    <Image
                      src={P1Png}
                      style={{ width: "65rpx", height: "65rpx" }}
                      mode="aspectFill"
                    ></Image>
                  </Badge>
                  <View style={{ marginTop: "15rpx" }}>待付款</View>
                </View>

                <View
                  onClick={() =>
                    Taro.navigateTo({ url: "/packages/myOrder/index?value=1" })
                  }
                  style={{
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "center",
                    alignItems: "center",
                  }}
                >
                  <Badge
                    content={info11.noShipmentTotal}
                    style={{ background: "#F90000" }}
                  >
                    <Image
                      src={P2Png}
                      style={{ width: "65rpx", height: "65rpx" }}
                      mode="aspectFill"
                    ></Image>
                  </Badge>
                  <View style={{ marginTop: "15rpx" }}>待发货</View>
                </View>

                <View
                  onClick={() =>
                    Taro.navigateTo({ url: "/packages/myOrder/index?value=2" })
                  }
                  style={{
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "center",
                    alignItems: "center",
                  }}
                >
                  <Badge
                    content={info11.noReceivedTotal}
                    style={{ background: "#F90000" }}
                  >
                    <Image
                      src={P4Png}
                      style={{ width: "65rpx", height: "65rpx" }}
                      mode="aspectFill"
                    ></Image>
                  </Badge>
                  <View style={{ marginTop: "15rpx" }}>待收货</View>
                </View>

                <View
                  onClick={() =>
                    Taro.navigateTo({ url: "/packages/myOrder/index" })
                  }
                  style={{
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "center",
                    alignItems: "center",
                  }}
                >
                  <Badge
                    content={info11.evaluationTotal}
                    style={{ background: "#F90000" }}
                  >
                    <Image
                      src={P3Png}
                      style={{ width: "65rpx", height: "65rpx" }}
                      mode="aspectFill"
                    ></Image>
                  </Badge>
                  <View style={{ marginTop: "15rpx" }}>待评价</View>
                </View>

                <View
                  onClick={() =>
                    Taro.navigateTo({ url: "/packages/myOrder/index?value=3" })
                  }
                  style={{
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "center",
                    alignItems: "center",
                  }}
                >
                  <Badge
                    content={info11.afterSaleTotal}
                    style={{ background: "#F90000" }}
                  >
                    <Image
                      src={P5Png}
                      style={{ width: "65rpx", height: "65rpx" }}
                      mode="aspectFill"
                    ></Image>
                  </Badge>
                  <View style={{ marginTop: "15rpx" }}>退货/售后</View>
                </View>
              </View>
            </View> */}
            {merchantType === 1 && (
              <View>
                <View
                  style={{
                    fontWeight: "bold",
                    fontSize: "33rpx",
                    color: "#333333",
                    marginTop: "35rpx",
                  }}
                >
                  店铺账户
                </View>

                <View
                  style={{
                    background: "#FFFFFF",
                    boxShadow: "0rpx 1rpx 9rpx 0rpx rgba(59,59,59,0.19)",
                    borderRadius: "14rpx",
                    padding: "24rpx",
                    marginTop: "17rpx",
                    color: "#666",
                    fontSize: "25rpx",
                  }}
                >
                  <View
                    style={{
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "space-between",
                    }}
                  >
                    <View
                      style={{
                        fontSize: "25rpx",
                        fontWeight: "bold",
                        color: "#333",
                      }}
                    >
                      基本信息
                    </View>
                    {merchantType == 1 && (
                      <View
                        onClick={handleInfo}
                        style={{ fontSize: "22rpx", color: "#00A2FF" }}
                      >
                        {edit ? "保存" : "编辑"}
                      </View>
                    )}
                  </View>
                  <View
                    style={{
                      display: "flex",
                      alignItems: "center",
                      marginTop: "15rpx",
                    }}
                  >
                    <View style={{ flex: "0 0 168rpx" }}>联系人</View>
                    <View>
                      {edit ? (
                        <Input
                          style={{
                            border: "1px solid #efefef",
                            fontSize: "22rpx",
                            padding: "0 12rpx",
                          }}
                          value={merchantShopOwnerName}
                          onChange={(e) =>
                            setMerchantShopOwnerName(e.detail.value)
                          }
                        />
                      ) : (
                        merchantShopOwnerName
                      )}
                    </View>
                  </View>
                  <View
                    style={{
                      display: "flex",
                      alignItems: "center",
                      marginTop: "15rpx",
                    }}
                  >
                    <View style={{ flex: "0 0 168rpx" }}>身份证号</View>
                    <View>
                      {edit ? (
                        <Input
                          style={{
                            border: "1px solid #efefef",
                            fontSize: "22rpx",
                            padding: "0 12rpx",
                          }}
                          value={merchantShopOwnerIdCard}
                          onChange={(e) =>
                            setMerchantShopOwnerIdCard(e.detail.value)
                          }
                        />
                      ) : (
                        merchantShopOwnerIdCard
                      )}
                    </View>
                  </View>
                  <View
                    style={{
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "space-between",
                      marginTop: "37rpx",
                    }}
                  >
                    <View
                      style={{
                        fontSize: "25rpx",
                        fontWeight: "bold",
                        color: "#333",
                      }}
                    >
                      资质信息
                    </View>
                    {merchantType == 1 && (
                      <View
                        style={{ fontSize: "22rpx", color: "#00A2FF" }}
                        onClick={uploadIdCardImage}
                      >
                        {shopOwnerInfo.merchantShopOwnerIdCardImage
                          ? "重新上传"
                          : "上传"}
                      </View>
                    )}
                  </View>
                  <View
                    style={{
                      display: "flex",
                      alignItems: "center",
                    }}
                  >
                    <View style={{ flex: "0 0 168rpx" }}>身份证照片</View>
                    <View style={{ marginRight: "77rpx" }}>
                      {shopOwnerInfo.merchantShopOwnerIdCardImage
                        ? "已上传"
                        : "未上传"}
                    </View>
                    {Boolean(shopOwnerInfo.merchantShopOwnerIdCardImage) && (
                      <Button
                        size="small"
                        variant="outlined"
                        color="primary"
                        shape="round"
                        onClick={previewIdCardImage}
                      >
                        查看
                      </Button>
                    )}
                  </View>
                  <View
                    style={{
                      fontSize: "25rpx",
                      fontWeight: "bold",
                      color: "#333",
                      marginTop: "30rpx",
                    }}
                  >
                    提现银行卡
                  </View>
                  <View
                    style={{
                      display: "flex",
                      alignItems: "center",
                      gap: "154rpx",
                    }}
                  >
                    <View>
                      {blankInfo.merchantBankAccount ? "已" : "未"}绑定银行卡
                    </View>
                    {merchantType == 1 && (
                      <Button
                        size="small"
                        variant="outlined"
                        color="primary"
                        shape="round"
                        onClick={() => setModel(true)}
                      >
                        {blankInfo.merchantBankAccount ? "修改" : "绑定"}银行卡
                      </Button>
                    )}
                  </View>
                </View>
              </View>
            )}

            <View
              style={{
                fontWeight: "bold",
                fontSize: "33rpx",
                color: "#333333",
                marginTop: "35rpx",
              }}
            >
              店铺服务
            </View>
            <View
              style={{
                display: "grid",
                gridTemplateColumns: "repeat(3,1fr)",
                justifyContent: "center",
                gap: "50rpx",
                textAlign: "center",
                alignItems: "center",
                backgroundColor: "#fff",
                padding: "52rpx",
                marginTop: "20rpx",
                boxShadow: "0rpx 1rpx 9rpx 0rpx rgba(59,59,59,0.19)",
                borderRadius: "14rpx",
                fontSize: "25rpx",
                color: "#333",
              }}
            >
              <View
                style={{
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  justifyContent: "center",
                  gap: "20rpx",
                }}
                onClick={() =>
                  Taro.navigateTo({ url: "/packages/packageApplication/index" })
                }
              >
                <Image
                  src={FuzhuangIcon}
                  width={56}
                  height={56}
                  mode="widthFix"
                />
                <View>报装申请</View>
              </View>
              <View
                style={{
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  justifyContent: "center",
                  gap: "20rpx",
                }}
                onClick={() => setOpen1(true)}
              >
                <Image
                  src={GuanyuIcon}
                  width={56}
                  height={56}
                  mode="widthFix"
                />
                <View>关于售后</View>
              </View>
              <Button1
                open-type="contact"
                plain
                style={{
                  padding: "0",
                  margin: "0",
                  background: "transparent",
                  border: "none",
                  outline: "none",
                  boxShadow: "none",
                }}
              >
                <View
                  style={{
                    display: "flex",
                    flexDirection: "column",
                    alignItems: "center",
                    justifyContent: "center",
                    gap: "20rpx",
                  }}
                >
                  <Image
                    src={KefuIcon}
                    width={56}
                    height={56}
                    mode="widthFix"
                  />
                  <View>客服专属</View>
                </View>
              </Button1>
              <View
                style={{
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  justifyContent: "center",
                  gap: "20rpx",
                }}
                onClick={() => setOpen2(true)}
              >
                <Image src={WentiIcon} width={56} height={56} mode="widthFix" />
                <View>常见问题</View>
              </View>
              {/* <View
            style={{
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              justifyContent: "center",
              gap: "20rpx",
            }}
          >
            <Image src={ShezhiIcon} width={56} height={56} mode="widthFix" />
            <View>更多设置</View>
          </View> */}
              <View
                style={{
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "center",
                  justifyContent: "center",
                  gap: "20rpx",
                }}
                onClick={() => setModel1(true)}
              >
                <Image src={MaIcon} width={56} height={56} mode="widthFix" />
                <View>店铺二维码</View>
              </View>

              {merchantType == 1 && (
                <View
                  style={{
                    display: "flex",
                    flexDirection: "column",
                    alignItems: "center",
                    justifyContent: "center",
                    gap: "20rpx",
                  }}
                  onClick={() => setModel3(true)}
                >
                  <Image src={MaIcon} width={56} height={56} mode="widthFix" />
                  <View>员工二维码</View>
                </View>
              )}
              {merchantType == 1 && (
                <View
                  style={{
                    display: "flex",
                    flexDirection: "column",
                    alignItems: "center",
                    justifyContent: "center",
                    gap: "20rpx",
                  }}
                  onClick={() =>
                    Taro.navigateTo({ url: "/packages/employee/index" })
                  }
                >
                  <FriendsOutlined size={30} />
                  {/* <Image
                  src={ShezhiIcon}
                  width={56}
                  height={56}
                  mode="widthFix"
                /> */}
                  <View>员工列表</View>
                </View>
              )}
            </View>
          </View>
        </View>
      ) : (
        <View>
          <View
            style={{
              padding: "43rpx",
              background: "linear-gradient(0deg, #fff, #e2f3fe)",
              display: "flex",
              alignItems: "center",
              gap: "20rpx",
            }}
          >
            <Image
              src={
                userInfo.consumerImage
                  ? baseUrl + userInfo.consumerImage
                  : LogoPng
              }
              style={{ width: "70rpx", height: "70rpx", borderRadius: "50%" }}
              mode="aspectFill"
            />
            <View
              style={{
                fontWeight: "bold",
                fontSize: "33rpx",
                color: "#222222",
              }}
            >
              {userInfo.consumerName}
            </View>
          </View>

          <View style={{ padding: "24rpx" }}>
            <View
              style={{
                background: "#fff",
                boxShadow: "0rpx 1rpx 9rpx 0rpx rgba(59,59,59,0.19)",
                borderRadius: "14rpx",
              }}
            >
              <View
                style={{
                  fontWeight: "bold",
                  fontSize: "29rpx",
                  color: "#333333",
                  padding: "24rpx",
                  borderBottom: "2rpx solid #DDDDDD",
                }}
              >
                我的订单
              </View>
              <View
                style={{
                  display: "flex",
                  fontSize: "22rpx",
                  color: "#333333",
                  padding: "47rpx",
                  justifyContent: "space-between",
                  textAlign: "center",
                }}
              >
                <View
                  onClick={() =>
                    Taro.navigateTo({ url: "/packages/myOrder/index?value=0" })
                  }
                  style={{
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "center",
                    alignItems: "center",
                  }}
                >
                  <Badge
                    content={info11.noPayTotal}
                    style={{ background: "#F90000" }}
                  >
                    <Image
                      src={P1Png}
                      style={{ width: "65rpx", height: "65rpx" }}
                      mode="aspectFill"
                    ></Image>
                  </Badge>
                  <View style={{ marginTop: "15rpx" }}>待付款</View>
                </View>

                <View
                  onClick={() =>
                    Taro.navigateTo({ url: "/packages/myOrder/index?value=1" })
                  }
                  style={{
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "center",
                    alignItems: "center",
                  }}
                >
                  <Badge
                    content={info11.noShipmentTotal}
                    style={{ background: "#F90000" }}
                  >
                    <Image
                      src={P2Png}
                      style={{ width: "65rpx", height: "65rpx" }}
                      mode="aspectFill"
                    ></Image>
                  </Badge>
                  <View style={{ marginTop: "15rpx" }}>待发货</View>
                </View>

                <View
                  onClick={() =>
                    Taro.navigateTo({ url: "/packages/myOrder/index?value=2" })
                  }
                  style={{
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "center",
                    alignItems: "center",
                  }}
                >
                  <Badge
                    content={info11.noReceivedTotal}
                    style={{ background: "#F90000" }}
                  >
                    <Image
                      src={P4Png}
                      style={{ width: "65rpx", height: "65rpx" }}
                      mode="aspectFill"
                    ></Image>
                  </Badge>
                  <View style={{ marginTop: "15rpx" }}>待收货</View>
                </View>

                <View
                  onClick={() =>
                    Taro.navigateTo({ url: "/packages/myOrder/index" })
                  }
                  style={{
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "center",
                    alignItems: "center",
                  }}
                >
                  <Badge
                    content={info11.evaluationTotal}
                    style={{ background: "#F90000" }}
                  >
                    <Image
                      src={P3Png}
                      style={{ width: "65rpx", height: "65rpx" }}
                      mode="aspectFill"
                    ></Image>
                  </Badge>
                  <View style={{ marginTop: "15rpx" }}>待评价</View>
                </View>

                <View
                  onClick={() =>
                    Taro.navigateTo({ url: "/packages/myOrder/index?value=3" })
                  }
                  style={{
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "center",
                    alignItems: "center",
                  }}
                >
                  <Badge
                    content={info11.afterSaleTotal}
                    style={{ background: "#F90000" }}
                  >
                    <Image
                      src={P5Png}
                      style={{ width: "65rpx", height: "65rpx" }}
                      mode="aspectFill"
                    ></Image>
                  </Badge>
                  <View style={{ marginTop: "15rpx" }}>退货/售后</View>
                </View>
              </View>
            </View>

            <View
              style={{
                display: "flex",
                padding: "38rpx 30rpx",
                background: "#fff",
                marginTop: "20rpx",
                boxShadow: "0rpx 1rpx 9rpx 0rpx rgba(59,59,59,0.19)",
                borderRadius: "14rpx",
                alignContent: "center",
                gap: "20rpx",
                fontSize: "29rpx",
                color: "#333",
              }}
              onClick={() =>
                Taro.navigateTo({ url: "/packages/discountCoupon/index" })
              }
            >
              <Image src={C1Png} style={{ width: "40rpx" }} mode="widthFix" />
              <View>我的优惠券</View>
              <View style={{ marginLeft: "auto" }}>
                <Arrow />
              </View>
            </View>
            <View
              style={{
                display: "flex",
                padding: "38rpx 30rpx",
                background: "#fff",
                marginTop: "20rpx",
                boxShadow: "0rpx 1rpx 9rpx 0rpx rgba(59,59,59,0.19)",
                borderRadius: "14rpx",
                alignContent: "center",
                gap: "20rpx",
                fontSize: "29rpx",
                color: "#333",
              }}
              onClick={() =>
                Taro.navigateTo({ url: "/packages/collection/index" })
              }
            >
              <Image src={C2Png} style={{ width: "40rpx" }} mode="widthFix" />
              <View>我的收藏</View>
              <View style={{ marginLeft: "auto" }}>
                <Arrow />
              </View>
            </View>
            <View
              style={{
                display: "flex",
                padding: "38rpx 30rpx",
                background: "#fff",
                marginTop: "20rpx",
                boxShadow: "0rpx 1rpx 9rpx 0rpx rgba(59,59,59,0.19)",
                borderRadius: "14rpx",
                alignContent: "center",
                gap: "20rpx",
                fontSize: "29rpx",
                color: "#333",
              }}
              onClick={() =>
                Taro.navigateTo({ url: "/packages/addressManager/index" })
              }
            >
              <Image src={C3Png} style={{ width: "40rpx" }} mode="widthFix" />
              <View>地址管理</View>
              <View style={{ marginLeft: "auto" }}>
                <Arrow />
              </View>
            </View>
            <View
              style={{
                display: "flex",
                padding: "38rpx 30rpx",
                background: "#fff",
                marginTop: "20rpx",
                boxShadow: "0rpx 1rpx 9rpx 0rpx rgba(59,59,59,0.19)",
                borderRadius: "14rpx",
                alignContent: "center",
                gap: "20rpx",
                fontSize: "29rpx",
                color: "#333",
              }}
              onClick={() =>
                Taro.navigateTo({ url: "/packages/invoice/index" })
              }
            >
              <Image src={C4Png} style={{ width: "40rpx" }} mode="widthFix" />
              <View>发票</View>
              <View style={{ marginLeft: "auto" }}>
                <Arrow />
              </View>
            </View>
          </View>
        </View>
      )}

      <Dialog
        open={model}
        onClose={setModel}
        backdrop={{ style: { zIndex: 10000 } }}
        style={{ zIndex: 10001 }}
      >
        <Dialog.Content>
          <Field label="银行名称" style={{ padding: "24rpx 0" }} required>
            <Input
              placeholder="请输入银行名称"
              value={blankInfo.merchantBankName}
              onChange={(e) =>
                setBlankInfo({ ...blankInfo, merchantBankName: e.detail.value })
              }
            />
          </Field>
          <Field label="开户行" style={{ padding: "24rpx 0" }} required>
            <Input
              placeholder="请输入开户行"
              value={blankInfo.merchantBankAccount}
              onChange={(e) =>
                setBlankInfo({
                  ...blankInfo,
                  merchantBankAccount: e.detail.value,
                })
              }
            />
          </Field>
          <Field label="银行卡号" style={{ padding: "24rpx 0" }} required>
            <Input
              placeholder="请输入银行卡号"
              value={blankInfo.merchantBankCardNumber}
              onChange={(e) =>
                setBlankInfo({
                  ...blankInfo,
                  merchantBankCardNumber: e.detail.value,
                })
              }
            />
          </Field>
        </Dialog.Content>
        <Dialog.Actions>
          <Button onClick={closeBlankInfo}>关闭</Button>
          <Button onClick={submitBlankInfo}>保存</Button>
        </Dialog.Actions>
      </Dialog>

      <Dialog
        open={model1}
        onClose={setModel1}
        backdrop={{ style: { zIndex: 10000 } }}
        style={{ zIndex: 10001 }}
      >
        <Dialog.Header>店铺二维码</Dialog.Header>
        <Dialog.Content>
          <View
            style={{
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
              alignItems: "center",
              gap: "15px",
            }}
          >
            <Image src={qrCode} width={300} height={300} mode="aspectFill" />
            {/* <View>Scan QR code to contact us</View> */}
          </View>
        </Dialog.Content>
        <Dialog.Actions>
          <Button onClick={() => setModel1(false)}>关闭</Button>
        </Dialog.Actions>
      </Dialog>
      <Dialog
        open={model3}
        onClose={setModel3}
        backdrop={{ style: { zIndex: 10000 } }}
        style={{ zIndex: 10001 }}
      >
        <Dialog.Header>员工二维码</Dialog.Header>
        <Dialog.Content>
          <View
            style={{
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
              alignItems: "center",
              gap: "15px",
            }}
          >
            <Image src={qrCode1} width={300} height={300} mode="aspectFill" />
            {/* <View>Scan QR code to contact us</View> */}
          </View>
        </Dialog.Content>
        <Dialog.Actions>
          <Button onClick={() => setModel3(false)}>关闭</Button>
        </Dialog.Actions>
      </Dialog>

      <Dialog
        open={model2}
        onClose={setModel2}
        backdrop={{ style: { zIndex: 10000 } }}
        style={{ zIndex: 10001 }}
      >
        <Dialog.Content>
          <ScrollView style={{ maxHeight: "60vh" }} scrollY>
            <Form ref={formRef}>
              <Form.Item
                defaultValue={info.merchantName}
                style={{ fontSize: "25rpx" }}
                name="merchantName"
                rules={[{ required: true, message: "请输入店门名称" }]}
              >
                <Form.Label>店门名称</Form.Label>
                <Form.Control>
                  <Input
                    style={{ fontSize: "25rpx" }}
                    placeholder="店门名称"
                    value={info.merchantName}
                    onChange={(e) =>
                      setInfo({ ...info, merchantName: e.detail.value })
                    }
                  />
                </Form.Control>
              </Form.Item>
              <Form.Item
                style={{ fontSize: "25rpx" }}
                name="merchantImages"
                rules={[{ required: true, message: "请输入门店图片" }]}
              >
                <Form.Label>门店图片</Form.Label>
                <Form.Control>
                  <Uploader>
                    <View
                      style={{ display: "flex", flexWrap: "wrap", gap: "5px" }}
                    >
                      {info.merchantImages &&
                        info.merchantImages.split(",").map((item, index) => (
                          <Uploader.Image
                            key={index}
                            url={process.env.TARO_APP_API + item}
                            mode="aspectFill"
                            onClick={(e) => {
                              e.preventDefault();
                              e.stopPropagation();
                              priviewImage(info.merchantImages, index);
                            }}
                            onRemove={(e) => {
                              e.preventDefault();
                              e.stopPropagation();
                              let arr = info.merchantImages.split(",");
                              arr.splice(index, 1);
                              setInfo({
                                ...info,
                                merchantImages: arr.join(","),
                              });
                            }}
                          ></Uploader.Image>
                        ))}
                      <Uploader.Upload
                        onClick={() => onUpload("merchantImages", 1)}
                      />
                    </View>
                  </Uploader>
                </Form.Control>
              </Form.Item>
              <Form.Item
                style={{ fontSize: "25rpx" }}
                name="merchantUserName"
                defaultValue={info.merchantUserName}
                rules={[{ required: true, message: "请输入联系人" }]}
              >
                <Form.Label>联系人</Form.Label>
                <Form.Control>
                  <Input
                    style={{ fontSize: "25rpx" }}
                    placeholder="联系人"
                    value={info.merchantUserName}
                    onChange={(e) =>
                      setInfo({
                        ...info,
                        merchantUserName: e.detail.value,
                      })
                    }
                  />
                </Form.Control>
              </Form.Item>
              <Form.Item
                style={{ fontSize: "25rpx" }}
                name="merchantPhone"
                defaultValue={info.merchantPhone}
                rules={[{ required: true, message: "请输入联系方式" }]}
              >
                <Form.Label>联系方式</Form.Label>
                <Form.Control>
                  <Input
                    style={{ fontSize: "25rpx" }}
                    placeholder="联系方式"
                    value={info.merchantPhone}
                    onChange={(e) =>
                      setInfo({
                        ...info,
                        merchantPhone: e.detail.value,
                      })
                    }
                  />
                </Form.Control>
              </Form.Item>
              <Form.Item
                style={{ fontSize: "25rpx" }}
                name="merchantAddress"
                defaultValue={info.merchantAddress}
                rules={[{ required: true, message: "请输入地址" }]}
              >
                <Form.Label>地址</Form.Label>
                <Form.Control>
                  <Input
                    style={{ fontSize: "25rpx" }}
                    placeholder="地址"
                    value={info.merchantAddress}
                    onChange={(e) =>
                      setInfo({
                        ...info,
                        merchantAddress: e.detail.value,
                      })
                    }
                  />
                </Form.Control>
              </Form.Item>
              <Form.Item
                style={{ fontSize: "25rpx" }}
                name="merchantLogo"
                rules={[{ required: true, message: "请输入门店图片" }]}
              >
                <Form.Label>门店图片</Form.Label>
                <Form.Control>
                  <Uploader>
                    <View
                      style={{ display: "flex", flexWrap: "wrap", gap: "5px" }}
                    >
                      {info.merchantLogo &&
                        info.merchantLogo.split(",").map((item, index) => (
                          <Uploader.Image
                            key={index}
                            url={process.env.TARO_APP_API + item}
                            mode="aspectFill"
                            onClick={(e) => {
                              e.preventDefault();
                              e.stopPropagation();
                              priviewImage(info.merchantLogo, index);
                            }}
                            onRemove={(e) => {
                              e.preventDefault();
                              e.stopPropagation();
                              let arr = info.merchantLogo.split(",");
                              arr.splice(index, 1);
                              setInfo({
                                ...info,
                                merchantLogo: arr.join(","),
                              });
                            }}
                          ></Uploader.Image>
                        ))}
                      <Uploader.Upload
                        onClick={() => onUpload("merchantLogo", 1)}
                      />
                    </View>
                  </Uploader>
                </Form.Control>
              </Form.Item>
              <Form.Item
                style={{ fontSize: "25rpx" }}
                name="merchantsBusinessHours"
                rules={[{ required: true, message: "请输入营业时间" }]}
              >
                <Form.Label>营业开始时间</Form.Label>
                <Form.Control>
                  <Input
                    style={{ fontSize: "25rpx" }}
                    placeholder="营业时间"
                    value={info.merchantsBusinessHours}
                    onChange={(e) =>
                      setInfo({
                        ...info,
                        merchantsBusinessHours: e.detail.value,
                      })
                    }
                  />
                </Form.Control>
              </Form.Item>
            </Form>
          </ScrollView>
        </Dialog.Content>
        <Dialog.Actions>
          <Button onClick={cancelUpdate}>取消</Button>
          <Button onClick={commitUpdate}>修改</Button>
        </Dialog.Actions>
      </Dialog>

      <Dialog
        open={open1}
        onClose={setOpen1}
        backdrop={{ style: { zIndex: 10000 } }}
        style={{ zIndex: 10001 }}
      >
        <Dialog.Header></Dialog.Header>
        <Dialog.Content>
          <ScrollView style={{ height: "60vh" }} scrollY>
            <View
              style={{ textAlign: "left" }}
              dangerouslySetInnerHTML={{
                __html: info12.salesService
                  ?.replaceAll("&nbsp;", " ")
                  ?.replaceAll("/prod-api", process.env.TARO_APP_API),
              }}
            ></View>
          </ScrollView>
        </Dialog.Content>
        <Dialog.Actions>
          <Button onClick={() => setOpen1(false)}>关闭</Button>
        </Dialog.Actions>
      </Dialog>
      <Dialog
        open={open2}
        onClose={setOpen2}
        backdrop={{ style: { zIndex: 10000 } }}
        style={{ zIndex: 10001 }}
      >
        <Dialog.Header></Dialog.Header>
        <Dialog.Content>
          <ScrollView style={{ height: "60vh" }} scrollY>
            <View
              style={{ textAlign: "left" }}
              dangerouslySetInnerHTML={{
                __html: info12.commonProblem
                  ?.replaceAll("&nbsp;", " ")
                  ?.replaceAll("/prod-api", process.env.TARO_APP_API)
                  ?.replaceAll(
                    "<img",
                    '<img mode="widthFix" style="width:100%"'
                  ),
              }}
            ></View>
          </ScrollView>
        </Dialog.Content>
        <Dialog.Actions>
          <Button onClick={() => setOpen2(false)}>关闭</Button>
        </Dialog.Actions>
      </Dialog>
    </View>
  );
}
